<template>
  <div ref="canvas" style="overflow: hidden; height: 400px">
  </div>
</template>

<script>
import * as charts from 'echarts';

/**
 * echarts 图表
 */
export default {
    components: {},
    data() {
        return {
            loading: false
        }
    },
    mounted() {
        let chart = charts.init(this.$refs.canvas);
        this.loading = true;

        // Echarts 需要延迟载入，避免组件错位
        setTimeout(() => {
            chart.setOption({
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    barWidth: 16,
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            });
            this.loading = false;
        }, 100);
        // chart.resize();
    }
};
</script>

